import React from 'react'
import { Routes, Route, NavLink, Navigate } from 'react-router-dom'
import About from './page/About/About'
import Home from './page/Home/Home'
import Index from './page/Index/Index'
import Message from './page/Message/Message'
import News from './page/News/News'
import NotFound from './page/Not Found/NotFound'
export default function App() {
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>React Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            <NavLink className="list-group-item" to='/about'>About</NavLink>
            <NavLink className="list-group-item" to='/home'>Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          {/* 配置路由表 */}
          <Routes>
            {/* 一级路由 */}
            {/*  caseSensitive:默认路由名称大小写是忽略的，如果想要让用户在实际访问路由地址和规定的路由地址大小写一致的话，则需要在一级路由中添加caseSensitive这个属性*/}
            <Route path='/home' element={<Home />} caseSensitive>
              {/* 二级路由 */}
              <Route path='/home/news' element={<News />} />
              <Route path='/home/message' element={<Message />} />
              {/* 一级路由下显示默认哪一个二级路由组件 */}
              <Route index element={<Navigate to='/home/news' />} />
            </Route>
            <Route path='/about' element={<About />} caseSensitive>
              <Route path='/about/news' element={<News />} />
              <Route path='/about/message' element={<Message />} />
              <Route index element={<Navigate to='/about/message' />} />
            </Route>
            {/* 全局统配符 */}
            <Route path='*' element={<NotFound />} />
            <Route path='/' element={<Index />} />
          </Routes>
        </div>
      </div>
    </div>
  )
}
